import React, { memo, useEffect, useState } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { getAllAlbumsAction } from "../store/actionCreators";

import ThemeHeaderNormal from "@/components/theme-header-normal";
import AlbumCover from "@/components/album-cover";
import Pagination from "@/components/pagination";
import { AllAlbumWrapper } from "./style";

const AllAlbum = memo(() => {
  const [currentPage, setCurrentPage] = useState(1);
  const dispatch = useDispatch();
  const { allAlbum } = useSelector(state => ({
    allAlbum: state.getIn(["album", "allAlbum"])
  }), shallowEqual);
  const toatl = allAlbum.total || 0;

  useEffect(() => {
    dispatch(getAllAlbumsAction(currentPage));  
  }, [dispatch, currentPage]);

  function onPageChange(page) {
    setCurrentPage(page);
  };

  return (
    <AllAlbumWrapper>
      <ThemeHeaderNormal title="全部新碟" />
      
      <div className="all-list">
        {
          allAlbum.albums?.map(item => <AlbumCover key={item.id} item={item} />)
        }
      </div>

      <Pagination 
        currentPage={currentPage}
        pageSize={30}
        total={toatl}
        onPageChange={onPageChange}
      />
    </AllAlbumWrapper>
  )
})

export default AllAlbum;